前言

雖說ES6推出了promise解決了callback hell的問題,但人總是不容易滿足。

於是在ES7 有了Async && Await的出現,寫起來更是直覺簡單

Async

Async是宣告function的關鍵字

以下為宣告async function之寫法

const fetchFN = async() => {
    //block
}

async function getFn () {
  //block
}

Await

顧名思義 "等待",在Async function中我們可以使用await明確的等待有資料回傳，再依序執行下去。

const api = 'https://fakestoreapi.com/products'

const fetchFN = async() => {
  const data = await fetch(api)
  const result = await data.json()
  console.log(result)
}

首先宣告一個非同步函式,定義一個data變數接住fetch回傳的資料，然後把data使用.json轉為json檔之後回傳給result變數。

再來對比promise寫法

function getFN () {
  fetch(api)
  .then((data) => data.json())
  .then((result) => console.log(result))
}

async function當然也可以使用.then .catch抓住錯誤

const api = 'https://fakestoreapi.com/sdfdsafdsfda' //wrong api

const fetchFN = async() => {
  const data = await fetch(api) //return reject
  const result = await data.json()
  console.log(result)
}
fetchFN().then(() => console.log('success'))
fetchFN().catch((err) => console.log(err)) //error

我喜歡async的寫法,會比較有循序漸進的感覺!!!